<template>
    <Card>
        <add-crop-data
                :showModal="cropForm.showModal"
                :cropForm="cropForm"
                :okModal="okModal"
                :cancelModal="cancelModal"
        ></add-crop-data>

        <Row slot="title" type="flex" align="middle">
            <Col span="16">
            <Button type="info" icon="plus" @click="add">添加</Button>
            </Col>
            <Col span="8">
            <div align="right">
                <Input v-model="search">
                <span slot="prepend">计划名称：</span>
                <Button slot="append" icon="ios-search"></Button>
                </Input>
            </div>
            </Col>
        </Row>
        <div class="edittable-table-height-con">
            <Table border stripe refs="table3" :columns="columnsList" :data="tableData"></Table>
        </div>
        <div align="right">
            <Page :total="10" show-elevator></Page>
        </div>
    </Card>
</template>
<style>
    body {
        background-color: #ff0000;
    }
</style>
<script>
    import tableData from './fert_data.js';
    import AddCropData from '../crop_data_manage/addCropData.vue'

    const ATextBtn = (h, text, url) => {
        return h('a', {
            attrs: {
                href: url,
            }
        }, text)
    }

    export default {
        components: {
            AddCropData
        },
        data() {
            return {
                tableData: [],
                columnsList: [
                    {
                        title: '序号',
                        type: 'index',
                        width: 80,
                        align: 'center'
                    },
                    {
                        title: '作物名称',
                        align: 'center',
                        key: 'name',
                        editable: true
                    },
                    {
                        title: '分类',
                        align: 'center',
                        key: 'classify',
                        editable: true
                    },
                    {
                        title: '生育周期',
                        align: 'center',
                        width: 100,
                        key: 'syzq',
                        render: (h, params) => {
                            return ATextBtn(h, params.row.syzq, "#/data_manage/growth_cycle");
                        }
                    },
                    {
                        title: '推荐施肥',
                        align: 'center',
                        width: 100,
                        key: 'handle',
                        render: (h, params) => {
                            return ATextBtn(h, "编辑", "#/data_manage/recom_fert")
                        }
                    },
                    {
                        title: '种植计划',
                        align: 'center',
                        width: 100,
                        key: 'handle',
                        render: (h, params) => {
                            return ATextBtn(h, "编辑", "#/data_manage/planting_scheme")
                        }
                    },
                    {
                        title: '操作',
                        align: 'center',
                        width: 200,
                        key: 'handle',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.edit(params);
                                        }
                                    },
                                }, "编辑"),
                                h('Poptip', {
                                    props: {
                                        confirm: true,
                                        title: "您确认删除这条内容吗？",
                                        trnsfer: true,
                                    },
                                    on: {
                                        'on-ok': () => {
                                            this.delete(params)
                                        }
                                    }
                                }, [
                                    h('Button', {
                                        props: {
                                            type: 'error',
                                            size: 'small',
                                        },
                                    }, "删除")
                                ])
                            ])
                        }
                    }
                ],
                cropForm: {
                    name: '',
                    classify: '',
                    lifecycle: '',
                    lifecycleDayNum: 1,
                    uploadList: [],
                    description: "",
                    showModal: false,
                },
                search: '',
            };
        },
        created() {
            this.getData();
        },
        methods: {
            getData() {
                this.tableData = tableData.table1Data;
            },
            addFert() {
                this.cropForm.showModal = true;
            },
            //清空表格对象
            clearData: function () {
                let tempData = {
                    name: '',
                    classify: '',
                    lifecycle: '',
                    lifecycleDayNum: 1,
                    uploadList: [
                        {
                            'name': 'a42bdcc1178e62b4694c830f028db5c0',
                            'url': 'https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=f3a7ffa4e350352aae6123086343fb1a/f11f3a292df5e0fe50717912566034a85edf72bc.jpg',
                            'status': "finished",
                        },
                        {
                            'name': 'bc7521e033abdd1e92222d733590f104',
                            'url': 'https://o5wwk8baw.qnssl.com/bc7521e033abdd1e92222d733590f104/avatar',
                            'status': "finished",
                        }
                    ],
                    description: "",
                    showModal: false,
                };
                this.cropForm = tempData;
            },
            //添加作物
            add: function () {
                this.clearData();
                this.cropForm.showModal = true;
            },
            edit: function (params) {
                var row = params.row;
//                console.log("params",row)
                //todo 这里将该行的数据传递到编辑框
                let editParams = {
                    name: row.name,
                    classify: row.classify,
                    lifecycle: '',
                    lifecycleDayNum: 1,
                    uploadList: [
                        {
                            'name': 'a42bdcc1178e62b4694c830f028db5c0',
                            'url': 'https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=f3a7ffa4e350352aae6123086343fb1a/f11f3a292df5e0fe50717912566034a85edf72bc.jpg',
                            'status': "finished",
                        },
                        {
                            'name': 'bc7521e033abdd1e92222d733590f104',
                            'url': 'https://o5wwk8baw.qnssl.com/bc7521e033abdd1e92222d733590f104/avatar',
                            'status': "finished",
                        }
                    ],
                    description: "",
                    showModal: true,
                };
                this.cropForm = editParams;
            },
            delete: function (params) {
                this.$Message.success("删除成功！")
                this.tableData.splice(params.index, 1);
            },

            okModal: function () {
                this.$Message.success("保存成功! ")
            },
            cancelModal: function () {
                this.$Message.warning("取消成功！")
            }
        }
    }
</script>